﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="Agricultural_Sales.ASP.Register"
    %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>农产品销售系统 - 用户注册</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: 'Microsoft YaHei', sans-serif;
                background: linear-gradient(135deg, #4CAF50 0%, #81C784 50%, #A5D6A7 100%);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
            }

            /* 背景装饰 */
            body::before {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="%23ffffff" opacity="0.1"/></svg>') repeat;
                animation: float 20s infinite linear;
                z-index: 1;
            }

            @keyframes float {
                0% {
                    transform: translateX(0) translateY(0);
                }

                100% {
                    transform: translateX(-50px) translateY(-50px);
                }
            }

            .register-container {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 25px;
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
                padding: 45px 50px;
                width: 100%;
                max-width: 650px;
                min-height: 650px;
                position: relative;
                z-index: 2;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.3);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .logo-section {
                text-align: center;
                margin-bottom: 30px;
                flex-shrink: 0;
            }

            .logo-icon {
                width: 90px;
                height: 90px;
                background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 45px;
                color: white;
                margin: 0 auto 20px;
                box-shadow: 0 15px 30px rgba(76, 175, 80, 0.4);
                transition: transform 0.3s ease;
                position: relative;
            }

            .logo-icon:hover {
                transform: scale(1.05) rotate(5deg);
            }

            .logo-icon::after {
                content: '✨';
                position: absolute;
                top: -10px;
                right: -10px;
                font-size: 20px;
                animation: sparkle 2s infinite;
            }

            @keyframes sparkle {

                0%,
                100% {
                    opacity: 0;
                    transform: scale(0.8);
                }

                50% {
                    opacity: 1;
                    transform: scale(1.2);
                }
            }

            .system-title {
                font-size: 32px;
                font-weight: 700;
                color: #2E7D32;
                margin-bottom: 12px;
                letter-spacing: 1px;
                background: linear-gradient(135deg, #2E7D32, #4CAF50);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .system-subtitle {
                font-size: 16px;
                color: #666;
                margin-bottom: 30px;
                line-height: 1.5;
            }

            .register-form {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .form-row {
                display: flex;
                gap: 20px;
                margin-bottom: 20px;
            }

            .form-group {
                margin-bottom: 20px;
                position: relative;
                flex: 1;
            }

            .form-group.full-width {
                flex: 1 1 100%;
            }

            .form-label {
                display: block;
                margin-bottom: 10px;
                font-weight: 600;
                color: #333;
                font-size: 15px;
                position: relative;
            }

            .form-label::before {
                content: '';
                position: absolute;
                left: -15px;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 4px;
                background: #4CAF50;
                border-radius: 50%;
            }

            .form-control {
                width: 100%;
                padding: 18px 25px;
                border: 2px solid #e9ecef;
                border-radius: 15px;
                font-size: 16px;
                transition: all 0.3s ease;
                background: white;
                outline: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                position: relative;
            }

            .form-control:focus {
                border-color: #4CAF50;
                box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            .form-control::placeholder {
                color: #aaa;
                transition: all 0.3s ease;
            }

            .form-control:focus::placeholder {
                opacity: 0.7;
                transform: translateX(5px);
            }

            .register-button {
                width: 100%;
                padding: 18px;
                background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
                border: none;
                border-radius: 15px;
                color: white;
                font-size: 17px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s ease;
                margin-top: 20px;
                box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
                letter-spacing: 0.5px;
                position: relative;
                overflow: hidden;
            }

            .register-button::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.5s;
            }

            .register-button:hover::before {
                left: 100%;
            }

            .register-button:hover {
                background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5);
            }

            .register-button:active {
                transform: translateY(-1px);
            }

            .footer-links {
                text-align: center;
                margin-top: 25px;
                padding-top: 20px;
                border-top: 1px solid #e9ecef;
                flex-shrink: 0;
            }

            .footer-links a {
                color: #4CAF50;
                text-decoration: none;
                font-size: 15px;
                margin: 0 15px;
                transition: all 0.3s ease;
                font-weight: 500;
                padding: 8px 16px;
                border-radius: 20px;
                display: inline-block;
                position: relative;
            }

            .footer-links a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0;
                height: 2px;
                background: #4CAF50;
                transition: all 0.3s ease;
                transform: translateX(-50%);
            }

            .footer-links a:hover {
                color: #45a049;
                background: rgba(76, 175, 80, 0.1);
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
            }

            .footer-links a:hover::after {
                width: 80%;
            }

            /* 错误和成功消息样式 */
            .error-message,
            .success-message {
                display: none;
                padding: 15px 20px;
                border-radius: 12px;
                margin-bottom: 20px;
                font-size: 14px;
                font-weight: 500;
                position: relative;
                animation: slideIn 0.3s ease;
            }

            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .error-message {
                background: linear-gradient(135deg, #ffebee, #ffcdd2);
                color: #c62828;
                border: 1px solid #ffcdd2;
                border-left: 4px solid #c62828;
            }

            .success-message {
                background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
                color: #2e7d32;
                border: 1px solid #c8e6c9;
                border-left: 4px solid #2e7d32;
            }

            /* 加载动画 */
            .loading {
                display: none;
                text-align: center;
                margin-top: 15px;
            }

            .loading-spinner {
                border: 3px solid #f3f3f3;
                border-top: 3px solid #4CAF50;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                animation: spin 1s linear infinite;
                margin: 0 auto;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            /* 响应式设计 */
            @media (max-width: 768px) {
                .register-container {
                    margin: 15px;
                    padding: 35px 30px;
                    max-width: 95%;
                    min-height: auto;
                }

                .form-row {
                    flex-direction: column;
                    gap: 0;
                }

                .system-title {
                    font-size: 26px;
                }

                .logo-icon {
                    width: 70px;
                    height: 70px;
                    font-size: 35px;
                }

                .form-control {
                    padding: 15px 20px;
                    font-size: 15px;
                }

                .register-button {
                    padding: 15px;
                    font-size: 16px;
                }
            }

            @media (max-width: 480px) {
                .register-container {
                    margin: 10px;
                    padding: 25px 20px;
                }

                .footer-links a {
                    display: block;
                    margin: 8px 0;
                    width: 100%;
                    max-width: 200px;
                    margin-left: auto;
                    margin-right: auto;
                }

                .system-title {
                    font-size: 22px;
                }

                .logo-icon {
                    width: 60px;
                    height: 60px;
                    font-size: 30px;
                }
            }

            /* 删除不需要的复杂样式 */
            .login-link-container,
            .login-link,
            .home-link,
            .link-separator {
                display: none;
            }
        </style>
    </head>

    <body>
        <form id="form1" runat="server">
            <div class="register-container">
                <!-- Logo和标题 -->
                <div class="logo-section">
                    <div class="logo-icon">
                        🌱
                    </div>
                    <h1 class="system-title">农产品销售系统</h1>
                    <p class="system-subtitle">注册新账户，开启您的农产品之旅</p>
                </div>

                <!-- 错误和成功消息 -->
                <div id="errorMessage" class="error-message">
                    <asp:Label ID="lblErrorMessage" runat="server"></asp:Label>
                </div>
                <div id="successMessage" class="success-message">
                    <asp:Label ID="lblSuccessMessage" runat="server"></asp:Label>
                </div>

                <!-- 注册表单 -->
                <div class="register-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">用户名</label>
                            <asp:TextBox ID="txtUserName" runat="server" CssClass="form-control"
                                placeholder="请输入用户名（3-20个字符）" MaxLength="20"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserName"
                                ErrorMessage="用户名不能为空" ForeColor="#c62828" Display="Dynamic">
                            </asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="revUserName" runat="server"
                                ControlToValidate="txtUserName" ErrorMessage="用户名长度应为3-20个字符"
                                ValidationExpression="^.{3,20}$" ForeColor="#c62828" Display="Dynamic">
                            </asp:RegularExpressionValidator>
                        </div>

                        <div class="form-group">
                            <label class="form-label">手机号</label>
                            <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control" placeholder="请输入11位手机号"
                                MaxLength="11"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvPhone" runat="server" ControlToValidate="txtPhone"
                                ErrorMessage="手机号不能为空" ForeColor="#c62828" Display="Dynamic">
                            </asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="revPhone" runat="server" ControlToValidate="txtPhone"
                                ErrorMessage="请输入正确的手机号格式" ValidationExpression="^1[3-9]\d{9}$" ForeColor="#c62828"
                                Display="Dynamic"></asp:RegularExpressionValidator>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">密码</label>
                            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"
                                placeholder="请输入密码（6-20个字符）" MaxLength="20"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword"
                                ErrorMessage="密码不能为空" ForeColor="#c62828" Display="Dynamic">
                            </asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="revPassword" runat="server"
                                ControlToValidate="txtPassword" ErrorMessage="密码长度应为6-20个字符"
                                ValidationExpression="^.{6,20}$" ForeColor="#c62828" Display="Dynamic">
                            </asp:RegularExpressionValidator>
                        </div>

                        <div class="form-group">
                            <label class="form-label">确认密码</label>
                            <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password"
                                CssClass="form-control" placeholder="请再次输入密码" MaxLength="20"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvConfirmPassword" runat="server"
                                ControlToValidate="txtConfirmPassword" ErrorMessage="确认密码不能为空" ForeColor="#c62828"
                                Display="Dynamic"></asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="cvPassword" runat="server" ControlToValidate="txtConfirmPassword"
                                ControlToCompare="txtPassword" ErrorMessage="两次输入的密码不一致" ForeColor="#c62828"
                                Display="Dynamic"></asp:CompareValidator>
                        </div>
                    </div>

                    <div class="form-group full-width">
                        <label class="form-label">地址</label>
                        <asp:TextBox ID="txtAddress" runat="server" CssClass="form-control" placeholder="请输入详细地址"
                            MaxLength="200"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvAddress" runat="server" ControlToValidate="txtAddress"
                            ErrorMessage="地址不能为空" ForeColor="#c62828" Display="Dynamic"></asp:RequiredFieldValidator>
                    </div>

                    <asp:Button ID="btnRegister" runat="server" Text="🚀 立即注册" CssClass="register-button"
                        OnClick="btnRegister_Click" OnClientClick="return onRegisterClick();" />

                    <!-- 加载动画 -->
                    <div class="loading" id="loadingDiv">
                        <div class="loading-spinner"></div>
                        <p style="margin-top: 10px; color: #666;">正在注册...</p>
                    </div>
                </div>

                <!-- 底部链接 -->
                <div class="footer-links">
                    <a href="Home.aspx">返回首页</a>
                    <a href="Login.aspx">已有账号？立即登录</a>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            // 隐藏消息
            function hideMessages() {
                document.getElementById('errorMessage').style.display = 'none';
                document.getElementById('successMessage').style.display = 'none';
            }

            // 显示错误消息
            function showError(message) {
                var errorDiv = document.getElementById('errorMessage');
                var errorLabel = document.getElementById('<%= lblErrorMessage.ClientID %>');
                errorLabel.textContent = message;
                errorDiv.style.display = 'block';
                document.getElementById('successMessage').style.display = 'none';
            }

            // 显示成功消息
            function showSuccess(message) {
                var successDiv = document.getElementById('successMessage');
                var successLabel = document.getElementById('<%= lblSuccessMessage.ClientID %>');
                successLabel.textContent = message;
                successDiv.style.display = 'block';
                document.getElementById('errorMessage').style.display = 'none';
            }

            // 显示加载动画
            function showLoading() {
                document.getElementById('loadingDiv').style.display = 'block';
                document.getElementById('<%= btnRegister.ClientID %>').style.display = 'none';
            }

            // 隐藏加载动画
            function hideLoading() {
                document.getElementById('loadingDiv').style.display = 'none';
                document.getElementById('<%= btnRegister.ClientID %>').style.display = 'block';
            }

            // 注册成功后的倒计时跳转
            function showSuccessWithCountdown() {
                var countdown = 3;
                var successDiv = document.getElementById('successMessage');
                var successLabel = successDiv.querySelector('span');

                successDiv.style.display = 'block';
                document.getElementById('errorMessage').style.display = 'none';

                var timer = setInterval(function () {
                    successLabel.innerHTML = '注册成功！<a href="Login.aspx" style="color: #2e7d32; text-decoration: underline; margin-left: 10px;">立即跳转</a> (' + countdown + '秒后自动跳转到登录页面)';
                    countdown--;

                    if (countdown < 0) {
                        clearInterval(timer);
                        window.location.href = 'Login.aspx';
                    }
                }, 1000);
            }

            // 页面加载完成后的初始化
            window.onload = function () {
                // 检查是否有服务器端消息需要显示
                var errorMsg = document.getElementById('<%= lblErrorMessage.ClientID %>').textContent;
                var successMsg = document.getElementById('<%= lblSuccessMessage.ClientID %>').textContent;

                if (errorMsg && errorMsg.trim() !== '') {
                    document.getElementById('errorMessage').style.display = 'block';
                }
                if (successMsg && successMsg.trim() !== '') {
                    document.getElementById('successMessage').style.display = 'block';
                }
            };

            // 表单提交前显示加载动画
            function onRegisterClick() {
                if (Page_ClientValidate()) {
                    showLoading();
                    return true;
                }
                return false;
            }
        </script>
    </body>

    </html>